<template>
	<view class="alterPsw">
		<custom-navi :show-home="false" background='rgba(0, 144, 250, 1)'>提现密码修改</custom-navi>
		<view class="alterPsw-title">
			{{title}}
		</view>
		<view class="alterPsw-hint">
			{{subhead}}
		</view>
		<view class="">
			<validcode ref="pwd" :maxlength="6" :isPwd="true" @finish="getPwd"></validcode>
		</view>
		<view class="alterPsw-succeed" v-if="upSucceed">
			<view class="icon"><image src="/static/icon/shenhe2.png" mode=""></image></view>
			<view class="title">修改成功</view>
			<view class="subhead">请牢记提现密码，下次提现将使用新密码！</view>
			<view class="confirmBtn" @tap="confirmBtn">确定</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				original:'', // 原密码
				newPsw:'', // 新密码
				newPsws:'', // 二次输入新密码
				title:'修改提现密码', // 标题
				subhead:'请先输入原提现密码', // 副标题
				upSucceed:false, // 提交成功页面是否显示
			}
		},
		onLoad() {
			
		},
		methods:{
			getPwd(e){ // 输入密码按钮
				let _this = this
				if(this.original == ''){
					this.original = e
					this.$refs.pwd.clear();
					this.title = '输入新的提现密码'
					this.subhead = '请先输入新提现密码'
				}else if(this.newPsw == ''){
					this.newPsw = e
					if(this.newPsw === this.original){
						this.newPsw = ''
						this.$utils.common.toast.fail("新密码与旧密码一致");
						return this.$refs.pwd.clear();
					}
					this.$refs.pwd.clear();
					this.title = '再次输入新的提现密码'
					this.subhead = '请先再次输入新提现密码'
				}else if(this.newPsws == ''){
					this.newPsws = e
					if(this.newPsws != this.newPsw){
						this.newPsws = ''
						this.$utils.common.toast.fail("密码不一致");
						return this.$refs.pwd.clear();
					}
					uni.showLoading({
					    title: '数据提交中'
					});
					setTimeout(function () {
					    uni.hideLoading();
						_this.upSucceed = true
					}, 1000);
					
					
					console.log(this.original,this.newPsw,this.newPsws)
				}
				
			},
			confirmBtn(){
				this.$utils.common.navigateBack()
			}
		}
	}
</script>

<style lang="scss">
	.alterPsw{
		height: 100vh;
		background-color: #FFFFFF;
		text-align: center;
		position: relative;
		// padding: 96rpx;
		&-succeed{
			position: absolute;
			width: 100%;
			height: 100vh;
			background-color: #FFFFFF;
			top: 0;
			left: 0;
			text-align: center;
			z-index: 999;
			padding: 250rpx 32rpx;
			.icon{
				width: 138rpx;
				height: 139rpx;
				margin: 0 auto;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.title{
				
				font-size:28rpx;
				font-family:PingFang SC;
				font-weight:400;
				color:rgba(0, 144, 250, 1);
				opacity:1;
				margin-top: 20rpx;
			}
			.subhead{
				font-size:24rpx;
				font-family:PingFang SC;
				font-weight:400;
				color:rgba(0, 144, 250, 1);
				opacity:1;
				margin-top: 12rpx;
			}
			.confirmBtn{
				width:686rpx;
				height:88rpx;
				background:rgba(0, 144, 250, 1);
				border-radius:10rpx;
				font-size:32rpx;
				font-family:PingFang SC;
				font-weight:400;
				line-height:88rpx;
				color:rgba(255,255,255,1);
				opacity:1;
				margin-top: 200rpx;
			}
		}
		&-title{
			font-size:60rpx;
			font-family:Source Han Sans CN;
			font-weight:500;
			color:rgba(69,69,69,1);
			opacity:1;
			margin-top: 100rpx;
		}
		&-hint{
			font-size:32rpx;
			font-family:Source Han Sans CN;
			font-weight:400;
			color:rgba(69,69,69,1);
			opacity:1;
			margin-top: 30rpx;
			margin-bottom: 130rpx;
		}
	}
</style>
